<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" type="text/css" href="stylesheets/index.css" />
    <link rel="stylesheet" type="text/css" href="stylesheets/user.css" />
    <title>Document</title>
</head>
<body>
<div class="sys_contnt">
    <div class="sys_content_left">
        <ul>
            <li><a href="/user_list" id="groupmanager" target="_self">用户管理</a></li>
            <li class="sys_content_left_l1"><a href="/user_add" id="useradd">用户添加</a></li>
        </ul>
    </div>
    <div class="sys_content_right" >
        <div class="user_add">
            <h1>添加用户</h1>
            <div class="con">
                <form action="/insertuser" method="post">
                    <table cellpadding="0" border="0" cellspacing="0" class="d">
                        <tr>
                            <td width="20%" class="td_1">用户名：</td>
                            <td width="80%"><input type="text" name="username" class="text"/></td>
                        </tr>
                        <tr>
                            <td width="20%" class="td_1">工<img src="images/word.png" alt=""/>号：</td>
                            <td width="80%"><input type="text" name="usercode" class="text"/></td>
                        </tr>
                        <tr>
                            <td class="td_1">用户组：</td>
                            <td>
                                <div id="s1" class="select">
                                    <span>搜索</span>
                                    <ul>
                                        <% for(i=0;i<groupList.length;i++){%>
                                        <li title="<%=groupList[i].groupId%>"><%=groupList[i].groupName%></li>
                                        <%}%>
                                    </ul>
                                    <input type="hidden" name="usergroup" id="usergroup"/>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td class="td_1">机<img src="images/word.png" alt=""/>构：</td>
                            <td>
                                <div id="s2" class="select">
                                    <span>搜索</span>
                                    <ul>
                                        <% for(i=0;i<departList.length;i++){%>
                                        <li title="<%=departList[i].departmentId%>"><%=departList[i].departName%></li>
                                        <%}%>
                                    </ul>
                                    <input type="hidden" name="userdepart" id="userdepart"/>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td class="td_1">密<img src="images/word.png" alt=""/>码：</td>
                            <td><input type="password" name="pwd" class="text"/>
                                <input name="button" type="submit" class="passbut" id="button" value="随机密码" /></td>
                        </tr>
                        <tr class="tr_5">
                            <td class="td_1"><span class="td_t">备<img src="images/word.png" alt=""/>注：</span></td>
                            <td class="texta"><textarea rows="8" cols="34" name="description"></textarea></td>
                        </tr>
                        <tr>
                            <td></td>
                            <td class="td_btn"><input type="submit" class="btn_sub" value="提 交"/></td>
                        </tr>
                    </table>
                </form>
            </div>
        </div>
    </div>

</div>
</body>
<script src="/javascripts/jquery-3.2.1.min.js"></script>
<script>
    $(document).ready(function(){
        $.get("/getallgroup",function(data,err){
            console.log(data);
            for(var i = 0; i < data.groupList.length; i++){
                var liNode = $("<li title="+ data.groupList[i].groupId +">"+ data.groupList[i].groupName +"</li>");
                $("#s1 ul").append(liNode);
            }
        })
        $.get("/getdepartlist",function(data,result){
            for(var i = 0; i < data.length; i++){
                var liNode = $("<li title="+ data[i].departmentid +">"+ data[i].departmentname +"</li>");
                $("#s2 ul").append(liNode);
            }
        })
    })
    function select(id){
        $(id + " span").click(function(){
            $(id + " ul").show(500);
            $(id  + " ul li").click(function(){
                $(id + " span").html($(this).html());
                $(id + " input").val($(this).attr("title"));
                $(id + " ul").hide(500);
            });
        });
    }

    $(document).ready(function(){
        select("#s1");
        select("#s2");
    });

</script>
</html>